<template>
<div class="main">
  <div>{{all_myrest_QueryUserInfo==null?'':''}}</div>
    <div>{{all_myrest_BuyProduct==null?'':''}}</div>
  <div>{{all_myrest_ProductDetail==null?'':''}}</div>
    <div class="banner">
        <!--banner轮播-->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="lunboItem in all_myrest_ProductImg"><img v-bind:src="lunboItem" /></div>
                <!--<div class="swiper-slide"><img src="../assets/banner2.png" /></div>
                <div class="swiper-slide"><img src="../assets/banner2.png" /></div>-->
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>

    <div class="mainInner">
        <!--标头 包括 产品名称 产品描述 进程 总需人次 是否参与本期多宝-->
        <div class="biaotou">
            <div class="titintro"><span class="tit">{{all_myrest_ProductDetail==null?" ":all_myrest_ProductDetail.productName}} </span><span class="intro">{{all_myrest_ProductDetail==null?" ":all_myrest_ProductDetail.productTitle}}</span></div>
            <div class="qihao">期号：<span class="hao">{{all_myrest_ProductDetail==null?" ":all_myrest_ProductDetail.productPeriod}}</span></div>
            <div class="progress"><div class="progressval" v-bind:style="progressStyle"></div></div>
            <div class="zongxu">
                <div class="num">总需：<span class="xu">{{all_myrest_ProductDetail==null?" ":all_myrest_ProductDetail.productPrice}}人次</span></div>
                <div class="shengyu">剩余：<span class="yu">{{all_myrest_ProductDetail==null?" ":(all_myrest_ProductDetail.productPrice-all_myrest_ProductDetail.spellbuyCount)}}</span></div>
            </div>
            <!--<div class="canyu" v-if="userName!=''" v-on:click="openDuoBaoMa()">{{userBuyedNum==0?"尚未参与本期夺宝":"本期夺宝您参与了"+userBuyedNum+"人次"}}</div>-->
            <div class="canyu" v-on:click="openDuoBaoMa()" v-text="canyuText"></div>
            <!--<div class="canyu" v-else>未登录</div>-->
        </div>

        <div class="winerinfobox">
            <div class="winerinfo">
                <div class="win_duobaoma"><div class="win_duobaoma_tit">幸运号码：</div><div class="win_duobaoma_val"></div></div>
                <div class="win_name"><div class="win_name_tit">用户昵称：</div><div class="win_name_val"></div></div>
                <div class="win_time"><div class="win_time_tit">参与时间：</div><div class="win_time_val"></div></div>
                <div class="win_num"><div class="win_num_tit">参与次数：</div><div class="win_num_val"></div></div>
            </div>
            <a class="moreInfo_a" href="rule.html"><div class="moreInfo">计算详情></div></a>
        </div>

        <!--信息分类 包括 图文详情 往期揭晓 晒单分享-->
        <div class="infoclassify">
            <router-link :to="{path:'/tuwen'+ '/' + productId }">
            <!--<a class="tuwen_a" v-bind:href="'/#/tuwen?productId='+(all_myrest_ProductDetail==null?'':all_myrest_ProductDetail.productId)" >-->
                <div class="tuwen">
                    <div class="tuwenL">图文详情</div>
                    <div class="tuwenR">建议在wifi下查看 > </div>
                </div>
            <!--</a>-->
            </router-link>
            <router-link :to="{path:'/WangQiJieXiao'+ '/' + productId }">
            <!--<a class="wangqi_a" v-bind:href="'/#/WangQiJieXiao?productId='+(all_myrest_ProductDetail==null?'':all_myrest_ProductDetail.productId)">-->
                <div class="tuwen">
                    <div class="tuwenL">往期揭晓</div>
                    <div class="tuwenR"> > </div>
                </div>
            <!--</a>-->
              </router-link>
            <router-link :to="{path:'/WangQiShaiDan'+ '/' + productId }">
            <!--<a class="wangshare_a" v-bind:href="'/#/WangQiShaiDan?productId='+(all_myrest_ProductDetail==null?'':all_myrest_ProductDetail.productId)">-->
                <div class="tuwen">
                    <div class="tuwenL">晒单分享</div>
                    <div class="tuwenR"> > </div>
                </div>
            <!--</a>-->
            </router-link>
        </div>
        <!--所有参与记录-->
        <div class="allrecord">
            <div class="recordHead">
                <div class="recordL">所有参与记录</div>
                <div class="recordR">(2017-02-07 17:39:56 开始)</div>
            </div>
            <div class="recordList">
                <div class="item" v-for="allRecord in all_myrest_ProductParticipate">
                    <div class="itemL">
                        <div class="userName">{{allRecord.userName}}</div>
                    </div>
                    <div class="itemR">
                        <div class="caninfo">参与了<span class="canNum">{{allRecord.buyCount}}</span>人次 </div>
                        <div class="canDateBox"><span class="canDate">{{allRecord.buyDate}}</span></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <div class="buybtn" v-on:click="gobuy()" v-text="zuixinqi">立即购买</div>
        </div>


    </div>

    <div class="blackcover" id="blackcover"></div>
    <div class="duobaoma">
        <div class="duobaomaTit">参与号码: <span>{{userBuyedNum>=0?userBuyedNum:''}}</span> 人次</div>
        <div class="matext">
            <div class="duobaomaitem" v-for="maitem in (all_myrest_RandomNumberUser==null?[]:all_myrest_RandomNumberUser.randomnumberlist)">{{maitem==''?'':maitem}}</div>
        </div>
        <div class="mashut" v-on:click="maShut()">x</div>
    </div>
    <div class="orderform" id="orderform">
        <div class="jfxf details">积分<span>999</span></div>
        <div class="tishi">
            <div class="tishi_cnt">夺宝有风险，参与需谨慎</div>
            <div class="shut" v-on:click="orderformHide"><img src="../assets/duoImages/shut.png" /></div>
        </div>
        <div class="iptwrap">
            <div class="iptarea">
                <div class="renci">参与人次</div>
                <div class="numbox">
                    <div class="jian" v-on:click="jian()"><img src="../assets/duoImages/jian.png" /></div>
                    <div class="iptvalbox"><input type="number" value="1" v-model="buypayload.postData.num"></div>
                    <div class="jia" v-on:click="jia()"><img src="../assets/duoImages/jia.png" /></div>
                </div>
                <div class="optlistbox clear">
                    <div class="optlist"><div class="optlistbtn" v-on:click="optclick($event)">5</div></div>
                    <div class="optlist"><div class="optlistbtn" v-on:click="optclick($event)">20</div></div>
                    <div class="optlist"><div class="optlistbtn" v-on:click="optclick($event)">50</div></div>
                    <div class="optlist"><div class="optlistbtn" v-on:click="optclick($event)">100</div></div>
                </div>
                <div class="yu_tips"></div>
            </div>
            <div class="totalprc">共<span class="totalprcval"><span class="totalvalnum">{{buypayload.postData.num*singlePoint}}</span>积分</span></div>
        </div>
        <div class="ipt_buy">
            <div class="ipt_buy_btn" v-on:click="buy()" >立即购买</div>
        </div>
    </div>

</div>
</template>
<script>
  import stores from './mystore.js'
  import Vue from 'vue';
  import { XButton, XInput,Group, Tab, TabItem } from 'vux'
  import { mapGetters,mapActions } from 'vuex'
  import sha1 from 'js-sha1'
  import Swiper from '../../static/swiper.js'
  require('../../static/swiper.css')
  export default {
      data(){
          return {
              kk:false,
              userjfAmount:'',
              zuixinqi:'立即购买',
              status:0,
              buySuccess:'',
              canyuText:'',
              userName:'',
              userBuyedNum:-1,
              singlePoint:0,
              productId:'',
              duoBaoId:'',
              yu_num:'',
              jindu_yuNum:true,
              yu_text:"剩余次数",
              progressStyle:{
                  width:"10px"
              },
              lbt:[],
              detailsPayload:{
                  url:'duodata',
                  actionName:"ProductDetail",
                  postData: {
                      spellbuyProductId:"",
                      //password:"112233",
                      //treeView:"true"
                  }
              },
              recordPayload:{
                  url:'duodata',
                  actionName:"ProductParticipate",
                  postData: {
                      spellbuyProductId:"",
                      //password:"112233",
                      //treeView:"true"
                      //duoBaoMaPayload
                  }
              },

              duoBaoMaPayload:{
                  url:'duodata',
                  actionName:"RandomNumberUser",
                  postData: {
                      spellbuyProductId:"",
                      //password:"112233",
                      //treeView:"true"
                      //duoBaoMaPayload
                  }
              },

              buypayload:{
                  url:'duodata',
                  actionName:"BuyProduct",
                  postData: {
                      "spellbuyProductId":"10445",
                      "num":"1",
                      //treeView:"true"
                  }
              },

              detailsUserInfoPayload:{
                  url:'baseapi',
                  actionName:"QueryUserInfo",
                  postData: {
                      //mobile:"18616717008",
                      //password:"112233",
                      //treeView:"true"
                }
              },

              lunboPayload:{
                  url:'duodata',
                  actionName:"ProductImg",
                  postData: {
                      "productId":"10445",
                      //"num":"1",
                      //treeView:"true"
                  }
              },

          }
      },

      watch:{
          lbt:{
              //deep:true,
              handler: function (val, oldVal) {
                  var swiper = new Swiper('.swiper-container', {
                      pagination: '.swiper-pagination',
                      //nextButton: '.swiper-button-next',
                      //prevButton: '.swiper-button-prev',
                      slidesPerView: 1,
                      //noSwiping:true,
                      //paginationClickable: true,
                      spaceBetween: 30,
                      loop: true,
                      autoplay:2000,
                      autoplayDisableOnInteraction:false
                  });
              },
          },
          userBuyedNum:function(){
              if(this.userBuyedNum>=0 && this.userName!=''){
                  this.canyuText="本期夺宝您参与了"+this.userBuyedNum+"人次"
              }else{
                  console.log("hahhahahahahah:watch:userBuyedNum:"+this.userBuyedNum)
                  this.canyuText="未登录"
              }

          },
          userName:function(){
              if(this.userName==''){
                  this.canyuText="未登录"
              }
          },
          buySuccess:function(){
              if(this.buySuccess=="SUCCESS"){
                //alert('购买成功');
                //this.buySuccess='';
                console.log("watch:buySuccess::"+this.buySuccess)
              }
          },

      },

      mounted(){

      },

      computed:{

            all_islogoined () {
                        return this.$store.getters.all_islogoined
                      },
          all_myrest_QueryUserInfo(){
              var dataval=this.$store.getters.all_restful_QueryUserInfo;
              if(dataval && dataval.body.resultCode==0){
                  this.userName=dataval.body.mobile;
                  this.userjfAmount=dataval.body.jfAmount;
                  return dataval.body
              }else{
                  return null
              }
          },
          mytest(){
            return null
          },
          all_myrest_ProductDetail(){
              var dataval=this.$store.getters.all_restful_ProductDetail;
              //alert("details=>computed=>all_myrest_ProductDetail:dataval:"+dataval)
            //console.log("zuixinqi:::111:::"+dataval.body.status)
              if(dataval){
                  this.singlePoint=dataval.body.singlePoint;
                  this.yu_num=dataval.body.productPrice-dataval.body.spellbuyCount;
                  console.log("zuixinqi::::::"+dataval.body.status)
                  if(dataval.body.status==1){
                    this.zuixinqi='本期已结束';
                    this.status=1;
                  }
                  this.progressStyle.width=Math.floor(dataval.body.spellbuyCount/dataval.body.productPrice*100)+'%';
                  return dataval.body
              }else{
                  //alert('else:all_myrest_ProductDetail:dataval:')
                  //this.tagSet=false;
                  return null
              }
          },
          //本品本期所有参与记录
          all_myrest_ProductParticipate(){
              var dataval=this.$store.getters.all_restful_ProductParticipate;
              if(dataval){
                  return dataval.body.latestParticipate
              }else{
                  //this.tagSet=false;
                  return null
              }
          },
          //夺宝码
          all_myrest_RandomNumberUser(){
              var dataval=this.$store.getters.all_restful_RandomNumberUser;
              if(dataval){
                  this.userBuyedNum=dataval.body.userIdBuyCount;
                  console.log("computed:userBuyedNum:"+this.userBuyedNum)
                  return dataval.body
              }else{
                  //this.tagSet=false;
                  return null
              }
          },
          //轮播图
          all_myrest_ProductImg(){
              var dataval=this.$store.getters.all_restful_ProductImg;
              if(dataval){
                  this.lbt=dataval.body.imgList;
                  console.log("lbt:"+this.lbt)
                  this.lunboFuc()
                  return dataval.body.imgList
              }else{
                  return null
              }
          },
          //
          all_myrest_BuyProduct(){
              var dataval=this.$store.getters.all_restful_BuyProduct;
              if(dataval){
                  if(this.kk){
                      if(dataval.body.message=="SUCCESS"){
                          //alert("购买成功");
                          this.$router.push('/DuoSuccess/'+this.duoBaoId+'/'+dataval.body.userIdBuyCount+'/successMark')
                          this.kk=false;
                          $(".orderform").removeClass("orderformEleShow")
                          $(".blackcover").removeClass("blackcoverEleShow")
                      }
                  }
                  //this.buySuccess=dataval.body.message;
                  //console.log("computed:buySuccess::"+this.buySuccess)
                  return dataval.body
              }else{
                  //this.tagSet=false;
                  return null
              }
          },

          all_myrest(){
              return this.$store.getters.all_logindata
          },

      },
      created (){
          //alert("details=>created")
          //this.iniFucRecord();
          console.log("this.$route.params::::"+this.$route.params)
          this.iniFuc();
          this.setTimeoutTest();

      },

      methods:{
          //kkk:function
          setTimeoutTest:function(){
              var that=this;
              setTimeout(function(){
                  // that.$store.commit('restful_api',that.QueryUserInfoPayload);
                  setTimeout(function(){
                      that.$store.commit('restful_api',that.recordPayload);
                      setTimeout(function(){
                          that.$store.commit('restful_api',that.duoBaoMaPayload);
                          setTimeout(function(){
                              that.$store.commit('restful_api',that.lunboPayload);
                          },200)
                      },200)
                  },200)
              },200);
          },
          /*setTimeoutTest:function(){
              var that=this;
              setTimeout(function(){
                that.$store.commit('restful_api',that.recordPayload);
              },2000);
          },*/
          clickTest:function(){
              //alert(this.recordPayload.postData.spellbuyProductId)
              //this.$store.commit('restful_api',this.recordPayload)
              this.iniFucRecord()
          },
          jia:function(e){
              var numchange=parseInt($(".iptvalbox input").val());
              //alert(numchange)
              if(numchange<this.yu_num){
                  this.buypayload.postData.num=numchange+1;
                  //$(".iptvalbox input").val(numchange+1);
                  //$(".totalvalnum").text((numchange+1)*this.singlePoint);
              }else{
                  //alertWindow('剩余次数不足')
                  alert("剩余次数不足")
              }
          },
          jian:function(e){
              var numchange=parseInt($(".iptvalbox input").val());
              //alert(numchange)
              if(numchange>1 && numchange<this.yu_num) {
                this.buypayload.postData.num=numchange-1;
               // $(".iptvalbox input").val(numchange - 1);
               // $(".totalvalnum").text((numchange - 1) * this.singlePoint);
              }else if(numchange<=1){
                  alert("单笔手数最少为1")
              }else{
                  //alertWindow('剩余次数不足')
                  alert("剩余次数不足")
              }
          },
          optclick:function(e){
              var obj=e.currentTarget;
              var optnum=parseInt($(obj).text());
              if(optnum<=this.yu_num){
                  this.buypayload.postData.num=optnum;
              }else{
                  alert("本期剩余次数只有"+this.yu_num+"次")
                  this.buypayload.postData.num=this.yu_num;
              }
          },
          doesh (){
              this.$store.commit('restful_api',this.QueryUserPayload)
          },
          GetQueryString:function(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = document.URL.split("?")[1].match(reg);
            //alert("ddd:"+window.location.search)
            if(r!=null)return  unescape(r[2]); return null;
          },
          iniFuc:function(){
              var duoid2=this.$route.params.did;
              var proid2=this.$route.params.pid;
              console.log("this.$router.params:::hahahah2:::"+this.$route.params)
              //接收url参数spellbuyProductId  duoBaoMaPayload
             // var duoId=this.GetQueryString("spellbuyProductId");
             // var productId=this.GetQueryString("productId");
              this.duoBaoId=this.detailsPayload.postData.spellbuyProductId=duoid2;
              this.recordPayload.postData.spellbuyProductId=duoid2;
              this.duoBaoMaPayload.postData.spellbuyProductId=duoid2;
              this.buypayload.postData.spellbuyProductId=duoid2;
              this.productId=this.lunboPayload.postData.productId=proid2;
              //alert("heihie:"+this.detailsPayload.postData.spellbuyProductId)
              this.$store.commit('restful_api',this.detailsPayload);
              //this.iniFucRecord();
              //setTimeout(this.iniFucRecord(),3000)
          },
          iniFucRecord:function(){
              //接收url参数spellbuyProductId
              var duoId=this.GetQueryString("spellbuyProductId");
              this.detailsPayload.postData.spellbuyProductId=duoId;
              this.recordPayload.postData.spellbuyProductId=duoId;
             // alert("hahahahahahha:"+this.recordPayload.postData.spellbuyProductId)
              //this.$store.commit('restful_api',this.detailsPayload);
              //alert("details=>methods=>iniFuc")
              this.$store.commit('restful_api',this.recordPayload);
              //this.iniFuc();
          },

          orderformHide:function(){
              var orderformEle=document.getElementById("orderform");
              var blackcoverEle=document.getElementById("blackcover");
              orderformEle.className="orderform orderformEleHide";
              blackcoverEle.className="blackcover";
          },
          //夺宝码展示
          openDuoBaoMa:function(){
              if(this.userName){
                  $(".blackcover").fadeIn();
                  $(".duobaoma").animate({"bottom":"0%"})
              }
          },
          maShut:function(){
              $(".blackcover").fadeOut();
              $(".duobaoma").animate({"bottom":"-200px"})
              //var orderformEle=document.getElementById("orderform");
              //var blackcoverEle=document.getElementById("blackcover");
              //orderformEle.className="orderform orderformEleHide";
              //blackcoverEle.className="blackcover";maShut
          },

          gobuy:function(obj,single_point,jindu_yuNum,duoId){
              //alert(single_point)
              //this.singlePoint=single_point;
              //this.duoBaoId=duoId;
              //this.buypayload.postData.spellbuyProductId=duoId;
              //$(".totalvalnum").text($(".iptvalbox input").val()*single_point);

            if(this.all_islogoined ==false ){
                this.$router.push('/login')
            }else  if(this.status==0){
                this.$store.commit('restful_api',this.detailsUserInfoPayload)
                var orderformEle=document.getElementById("orderform");
                var blackcoverEle=document.getElementById("blackcover");
                orderformEle.className="orderform orderformEleShow";
                blackcoverEle.className="blackcover blackcoverEleShow";
            }
          },

          buy:function (){
              if(this.all_islogoined ==false ){
                  this.$router.push('/login')
              }else{
                  if(this.userjfAmount>=this.buypayload.postData.num*this.singlePoint){
                      this.kk=true;
                      this.$store.commit('restful_api',this.buypayload)
                  }else{
                      this.$vux.alert.show({
                          title:"积分不足",
                          content:'本次夺宝积分不足'
                      })

                  }
              }
              //this.kk=true;
              //this.$store.commit('restful_api',this.buypayload)
          },

          lunboFuc:function(){
            console.log("dddd:"+$(".swiper-slide").length)

            /*setTimeout(function(){
              var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                //nextButton: '.swiper-button-next',
                //prevButton: '.swiper-button-prev',
                slidesPerView: 1,
                //noSwiping:true,
                //paginationClickable: true,
                spaceBetween: 30,
                loop: true,
                autoplay:2000,
                autoplayDisableOnInteraction:false
              });
            },2000)*/

          },

        /*  cntReady(){
              console.info(3434343);
              this.$store.commit('restful_api',this.mypayload);
           },
          ...mapActions([
              'increment',
              'decrement',
              'incrementIfOdd'
          ]),
        */
      },
      components: { XButton, Group, XInput, Tab, TabItem }

  }

</script>

<style scoped>
  *{ margin:0; padding:0;}
  a{ text-decoration:none;}
  html,body{ width:100%; background-color:#f1eeec !important;}
  .main{ background-color: #f1eeec;}
  div img{ width:100%;}
  .clear:after{ content: ""; display: block;height: 0;visibility: hidden;clear: both;}

  .banner{ background-color:#fff;}
  .swiper-container{ width:100%; }
  .swiper-slide img{ width:100%;}

  .biaotou{ box-sizing:border-box; -webkit-box-sizing:border-box; padding:15px 10px; background-color:#fff; border-bottom:1px solid #c8c7cc;}
  .titintro{ font-size:16px;}
  .tit{ color:#333;}
  .intro{ color:#db3b56;}
  .qihao{ font-size:12px; color:#878787; margin-top:15px;}
  .progress{ width:100%; height:10px; background-color:#efedee; border-radius:3px; margin:2px 0;}
  .progressval{width:36%; height:10px; background-color:#ffc53d; border-radius:3px;}
  .zongxu{ font-size:12px; color:#878787; display:box; display:-webkit-box;}
  .num{ -webkit-box-flex:1; box-flex:1;}
  .shengyu{ -webkit-box-flex:1; box-flex:1; text-align:right;}
  .yu{ color:#1062fd;}
  .canyu{ width:100%; background-color:#f3f3f3; color:#999; text-align:center; padding:10px 0; margin-top:10px; font-size:14px;}
  .canyu span{ color:#db3652;}

  .infoclassify{ background-color:#fff; margin-top:10px;}
  .tuwen{ display:box; display:-webkit-box; border-bottom:1px solid #c8c7cc; box-sizing:border-box;-webkit-box-sizing:border-box; padding:12px 15px;}
  .tuwenL,.tuwenR{ -webkit-box-flex:1; box-flex:1;}
  .tuwenL{ color:#535353; font-size:16px;}
  .tuwenR{ color:#999; font-size:12px; text-align:right; padding-top:2px;}

  .allrecord{ margin-top:10px; background-color:#fff; padding-bottom:56px;}
  .recordHead{ display:box; display:-webkit-box; box-sizing:border-box;-webkit-box-sizing:border-box; color:#535353; font-size:16px; padding:15px; border-bottom:1px solid #eee;}
  .recordL,.recordR{ -webkit-box-flex:1; box-flex:1; }
  .recordR{ color:#999; font-size:12px; text-align:right; padding-top:2px;}
  .recordList{ padding:0 15px 15px 15px;}
  .dataMark{ font-size:12px; color:#999; width:70px; background-color:#f8f8f8; border:1px solid #dcdcdc; border-radius:20px; padding:3px 0px;
    text-align:center; }

  .recordList .item{ display:box; display:-webkit-box; border-bottom:1px solid #eee; padding-bottom:8px;}
  .recordList .item .itemL{ -webkit-box-flex:1; box-flex:1; padding-top:8px; }
  .recordList .headPic{ width:35px; height:35px; border-radius:20px; overflow:hidden; _background:url(../assets/duoImages/canHeadPic.png) no-repeat center; _background-size:cover;}
  .recordList .headPic img{ width:100%; height:100%;}
  .recordList .itemKong{ display:box; display:-webkit-box;}
  .recordList .itemKong .itemL{ width:35px; padding-top:12px; background:url(../assets/duoImages/line.png); background-repeat:repeat-y;}
  .recordList .headPicKong{ width:35px; height:0px; border-radius:20px;}
  .recordList .item .itemR{ -webkit-box-flex:1; box-flex:1; padding-top:8px; text-align:right;}
  .itemR{ padding-left:10px; font-size:12px; color:#525252;}
  .userName{ color:#525252; font-size:12px;}
  .userIp{ color:#999;}
  .canNum{ color:#db3652;}
  .canDate{ color:#999;}

  .footer{ width:100%; padding:10px; border-top:1px solid #dcdcdc; box-sizing:border-box; -webkit-box-sizing:border-box; position:fixed; left:0; bottom:50px; background-color:#fff;}
  .buybtn{ background-color:#db3652; border-radius:4px; text-align:center; padding:10px; color:#fff; font-size:16px; cursor:pointer;}
  .gonew{ background-color:#db3652; border-radius:4px; text-align:center; padding:10px; color:#fff; font-size:16px; cursor:pointer;}

  /*======== 积分悬浮窗 =========*/
  .jfxf.details{ color:#fff; font-size:14px; position:absolute; right:20px; top:-100px; padding:8px 10px; text-align:center; background-color:#202020; border-radius:16px; display:none;}


  /*===========夺宝码=============*/
  .duobaoma{ width:100%; height:200px; background-color:#fff; position:fixed; left:0%; bottom:-220px; padding:10px; z-index:1001; box-sizing:border-box; -webkit-box-sizing:border-box; display:block;}
  .matext{ width:100%; height:100%; text-align:center;  overflow-y:scroll; padding-top:5px; }
  .duobaomaitem{ width:25%; float:left; padding-bottom:3px;}
  .mashut{ position:absolute; right:10px; top:9px; width:24px; height:24px; border-radius:20px; background:rgba(0,0,0,0.5); font-size:18px; text-align:center; line-height:22px; color:#fff; }
  .duobaomaTit{ border-bottom:1px solid #eee; padding-bottom:10px; color:#5e5e5e; font-size:14px;}
  .duobaomaTit span{ color:#db3652;}


  .winerinfobox{ background-color:#fff; padding:10px; margin-top:10px; display:none; position:relative;}
  .winerinfo{ background-color:#db3652; _width:80%;  margin:0 auto; padding:20px 0;}
  .moreInfo{ position:absolute; right:15px; bottom:15px; font-size:12px; color:#fff; opacity:0.6;}

  .winerinfo>div{ display:box; display:-webkit-box; padding:3px 0; font-size:12px;}
  .winerinfo>div>div:nth-child(1){ width:45%; color:#fff; font-size:12px; }
  .winerinfo>div>div:nth-child(2){ width:55%; color:#fff; font-size:12px; }
  .win_duobaoma_tit,.win_name_tit,.win_time_tit,.win_num_tit{ text-align:right; color:#fff;}

  /***=====   以下为原夺宝公共部分   =====****/
  /***数据为空***/
  .noContPic{ width:40%; margin:0 auto;}
  .noContTxt{ text-align:center; color:#bbb; margin-top:15px;}

  /**页面未找到**/
  .noPageWrap{ width:80%; margin:0 auto; padding-top:15%; }
  .noPageGoBack{ text-align:center; padding:15px; border-bottom:1px solid #eee; border-top:1px solid #eee; background-color:#fcfcfc;}

  /**购买 输入框**/
  .blackcover{ width:100%; height: 100%; background-color:#000; opacity:0.5; position:fixed; left:0; bottom:0; display:none; z-index:999;}
  .blackcover.blackcoverEleShow{ width:100%; height: 100%; background-color:#000; opacity:0.5; position:fixed; left:0; bottom:0; display:block; z-index:999;}
  .orderform{ width:100%; position:fixed; left:0; bottom:-300px; background-color:#fff; z-index:1000; _opacity:0.3;}
  .tishi{ display:box; display:-webkit-box; border-bottom:1px solid #e7e7e7; padding:15px; color:#999999; font-size:14px;}
  .tishi_cnt{  box-flex:1; -webkit-box-flex:1;}
  .shut{ width:15px; }
  .iptwrap{ padding-left:15px; border-bottom:1px solid #e7e7e7;}
  .iptarea{ border-bottom:1px solid #e7e7e7; padding-bottom:15px; position:relative;}
  .renci{ text-align:center; font-size:14px; padding:10px 0;}
  .numbox{ display:box; display:-webkit-box; width:70%; border:1px solid #aeaeae; border-radius:3px; margin:0px auto 15px auto; padding-top:1px;}
  .yu_tips{ position:absolute; right:15%; top:13px; color:#db3652; font-size:12px; opacity:0.8; display:none;}
  .jia,.jian{ width:15px; height:15px; padding:10px;}
  .jia{ border-left:1px solid #eee;}
  .jian{ border-right:1px solid #eee;}
  .iptvalbox{ box-flex:1; -webkit-box-flex:1;}
  .iptvalbox input{ width:100%; height:34px; font-size:14px; color:#db3652; border:none; text-align:center; outline:none; }
  .optlistbox{ width:70%; margin:0 auto;;}
  .optlist{ float:left; width:22%; margin-right:4%;}
  .optlistbtn{ border:1px solid #aeaeae; border-radius:3px; text-align:center; padding:3px 0;}
  .optlist:nth-last-child(1){ margin-right:0;}
  .ipt_buy{ padding:10px; color:#fff; font-size:14px;}
  .ipt_buy_btn{ width:100%; background-color:#db3652; border-radius:3px; text-align:center; padding:10px 0;}
  .unableClick{ width:100%; background-color:#db3652; border-radius:3px; text-align:center; padding:10px 0;}
  .totalprc{ text-align:center; padding:10px 0; color:#999;}
  .totalprcval{ color:#db3652;}

  /**==  动画  ==*/
  /*-----购买表单显示----------------------------*/
  .orderformEleShow{animation:orderformShow 0.5s forwards; -webkit-animation:orderformShow 0.5s forwards;}
  @keyframes orderformShow
  {
    from {bottom:-300px;}
    to {bottom:53px;}
  }
  @-webkit-keyframes orderformShow /*Safari and Chrome*/
  {
    from {bottom:-300px;}
    to {bottom:53px;}
  }
  /*-----购买表单隐藏----------------------------*/
  .orderformEleHide{animation:orderformHide 0.5s forwards; -webkit-animation:orderformHide 0.5s forwards;}
  @keyframes orderformHide
  {
    from {bottom:53px;}
    to {bottom:-300px;}
  }
  @-webkit-keyframes orderformHide /*Safari and Chrome*/
  {
    from {bottom:53px;}
    to {bottom:-300px;}
  }

  /*-----模态层显示----------------------------*/
  .blackcoverEleShow{animation:blackcoverShow 0.5s forwards; -webkit-animation:blackcoverShow 0.5s forwards;}
  @keyframes blackcoverShow
  {
    from {opacity:0;}
    to {opacity:0.5;}
  }
  @-webkit-keyframes blackcoverShow /*Safari and Chrome*/
  {
    from {opacity:0;}
    to {opacity:0.5;}
  }
  /*-----模态层隐藏----------------------------*/
  .blackcoverEleHide{animation:blackcoverHide 0.5s forwards; -webkit-animation:blackcoverHide 0.5s forwards;}
  @keyframes blackcoverHide
  {
    from {opacity:0;}
    to {opacity:0.5;}
  }
  @-webkit-keyframes blackcoverHide /*Safari and Chrome*/
  {
    from {opacity:0;}
    to {opacity:0.5;}
  }
</style>
